 //关闭页面//
 const close=document.getElementById('win-close');
 close.onclick=function(){
     window.close();
 };





 //动态变色
 const li=document.getElementById('c-right').querySelectorAll('li');
 const lis=document.getElementById('c-left').querySelectorAll('li');
 for(var j=0;j<li.length;j++){   
 li[j].onclick=function(){  
 for(var k=0;k<li.length;k++)  
 {  
     li[k].style.fontSize=20+'px';  
     li[k].style.borderBottom="";  
 }  
 this.style.fontSize=23+'px';  
 this.style.borderBottom="solid red";  
 }  
 }
 //左侧字体
 // for(var i=0;i<lis.length;i++){ 
 //     lis[i].onclick=function(){
 //     for(var i=0;i<lis.length;i++)
 //     {
 //         lis[i].style.fontSize=15+'px';
 //         // li[i].style.border-buttom
 //         lis[i].style.fontWeight=300;
 //     }
 //     this.style.fontSize=20+'px' ;
 //     this.style.fontWeight=600;
 // }}



 //播放页面写入js代码
 var  mplay =document.getElementById('mplay');
//获取音频
 var audio=document.querySelector('audio');
 //播放切换图片
 var  mplaypng=document.getElementById('mplaypng');
 var  mplaypng1=document.getElementById('mplaypng1').src;
 var  mplaypng2=document.getElementById('mplaypng').src;
 //上一首
 var  last=document.getElementById('last');
 //下一首
 var  after=document.getElementById('after');
 var flag=false;
 var position =0;
 //获取左边栏目歌曲信息
 var musicpicture=document.getElementById('music-picture');
 //歌曲名
 var musicname=document.getElementById('musicname');
 //歌手
 var singer=document.getElementById('singer');
 //把图片存在伪数组解决跨域问题
 var imgs = document.querySelectorAll('.imgs'); 
 //获取时间长度文本
 var timeend=document.getElementById('timeend');
 var timestar=document.getElementById('timestar');
 //进度条
 var load=document.getElementById('load');
 var timeborder=document.getElementById('timeborder');
  //声音
 var voice=document.getElementById('voice');
 var voice1=document.getElementById('voice1').src;
 var voice2=document.getElementById('voice').src;
 var changevoice=document.getElementById('changevoice');
 var ul2=document.getElementById('ul2');


 //更新歌曲总时间
 function gettime(){
     setTimeout(function(){
         var m,s; 
         console.log(audio.duration);
         m = Math.floor(audio.duration / 60); 
         s=Math.ceil(audio.duration%60);
         if(m<10)
         {m='0'+m;}
         if(s<10)
         {s='0'+s;}
         timeend.innerHTML=m+':'+s;
     },600) }



     var updatetime1;
      var sumtime=0;
     //更新时间适用于切换(切换)
     function updatetime(){ 
     let m1=0,s1=0;
     sumtime=0;
     timestar.innerHTML="00:00";
     updatetime1=setInterval( function(){
     if((m1*60+s1)==Math.floor(audio.duration))
     {
         clearInterval(updatetime);
         after.onclick();
     }
     else{
     //      if(s1>=0 && s1<60)
     // {  
     //     s1++;
     //     timestar.innerHTML=(m1<10?'0'+m1:m1)+':'+(s1<10?'0'+s1:s1 );
     //     sumtime=m1*60+s1;
     //     styleload();
         //  console.log(sumtime);
     if(audio.currentTime<=59)
     {   m1=0;
         s1=Math.ceil(audio.currentTime); 
         timestar.innerHTML=(m1<10?'0'+m1:m1)+':'+(s1<10?'0'+s1:s1 );
         sumtime=m1*60+s1;
         // console.log(sumtime);
         styleload();
         
     }
     else{
         m1=Math.floor(audio.currentTime/60);
         s1=Math.ceil(audio.currentTime%60); 
         sumtime=m1*60+s1;
         timestar.innerHTML=(m1<10?'0'+m1:m1)+':'+(s1<10?'0'+s1:s1 );
         styleload();
     }
         // console.log(sumtime);
     }
     
    
     }
    , 600);
  }
     //更新秒数  
  


  //更新时间适用于点击暂停
  var updatetime3;
  function updatetime2(){ 
     let m1=parseInt(sumtime/60),s1=sumtime-(m1*60);
     updatetime3=setInterval( function(){
     if((m1*60+s1)==Math.floor(audio.duration))
     {
 
         clearInterval(updatetime2);
         after.onclick();
         
     }
     else{
         if(audio.currentTime<60)
     {   m1=0;
         s1=Math.ceil(audio.currentTime); 
         timestar.innerHTML=(m1<10?'0'+m1:m1)+':'+(s1<10?'0'+s1:s1 );
         sumtime=m1*60+s1;
         // console.log(sumtime);
         styleload();
         
     }
     else{
         m1=Math.floor(audio.currentTime/60);
         s1=Math.ceil(audio.currentTime%60); 
         sumtime=m1*60+s1;
         timestar.innerHTML=(m1<10?'0'+m1:m1)+':'+(s1<10?'0'+s1:s1 );
         styleload();
     }
    }
     }
    , 1000);
  }

 //动态进度条
     function styleload(){
         var len=0;
         var len=timeborder.offsetWidth/audio.duration;
         var length =len;
         load.style.width=len*audio.currentTime+'px'; 
      }
      
      //进度条移动
      timeborder.onmousedown=function(e){
         console.log(e.offsetX);
         // console.log(timeborder.offsetLeft);
         // console.log(e.offsetX-timeborder.offsetLeft);
         var  lenth=e.offsetX/timeborder.offsetWidth;
         console.log(lenth.toFixed(2));
         // console.log(400*lenth.toFixed(2));
         load.style.width=400*lenth.toFixed(2)+'px';
         audio.currentTime=audio.duration*lenth.toFixed(2);
         styleload();
     }

 
 //编写数组存放音乐信息
 var  music=[{
     musicname:'心拍数#0822',
     name:'之瀬ユウ/初音ミク',
     path:'./music/心拍数0822.mp3',
     pic:imgs[0].src,
    },{
     musicname:'アイロニ',
     name:'majiko',
     path:'./music/アイロニ(カバー).mp3',
     pic:imgs[1].src,
    },{
     musicname:'Yuri on ICE',
     name:'梅林太郎',
     path:'./music/Yuri on ICE.mp3',
     pic:imgs[2].src,
    },{
     musicname:'万分之一的光',
     name:'洛天依',
     path:'./music/万分之一的光.mp3',
     pic:imgs[3].src,
    },{
     musicname:'一个人的城市',
     name:'傅许',
     path:'./music/一个人的城市.mp3',
     pic:imgs[4].src,
    },{
     musicname:'Invisible Umbrella',
     name:'MoreanP',
     path:'./music/InvisibleUmbrella.mp3',
     pic:imgs[5].src,
    }] 
   //切换函数(写在播放前确保变量被识别)
 //       切换函数(写在播放前确保变量被识别)
   var i=0;
  //封装函数用于切换音乐
  function exchange(){
     clearInterval(updatetime1);//清除定时器的秒数
     clearInterval(updatetime3);//清除定时器的秒数
     load.style.width=0+'px';
     audio.src=music[i].path;
     mplaypng.src=mplaypng1;
     audio.pause();
     audio.play(); 
     position=audio.currentTime;
     singer.innerHTML=music[i].name;
     musicname.innerHTML=music[i].musicname;  
     musicpicture.style.backgroundImage='url('+imgs[i].src+')';
     flag=true;
     gettime();
     updatetime();
  }
  
  
   //上一首
    last.onclick=function(){
     i--;
     if(i<0){i=0};
     exchange();
    }
    //下一首
    after.onclick=function (){
     i++;
     if(i>music.length){i=0};
    exchange();
    }
    
 
 
 
 // 开始播放函数
    mplay.onclick=function(){
     clearInterval(updatetime1);//清除定时器的秒数
    if(flag==false){ 
     audio.meted=false;
     //获取前一次播放时间 
     audio.src=music[i].path;
     // console.log(music[i].path);
     audio.currentTime=position;
     // console.log(position);
     gettime();
     audio.play();  
     mplaypng.src=mplaypng1;//改变样式
     flag=true;
     updatetime2();
    } 
    else if(flag==true)
    { clearInterval(updatetime3);//清除定时器的秒数
     position=audio.currentTime;
     audio.pause();
     mplaypng.src=mplaypng2;
     flag=false;
    
    }}
    //切换函数
    //封装函数获取歌曲时间
  
    //设置点击静音函数
    var sign=false;

    voice.onclick=function(){
     if(sign==false)
     {
          audio.muted=true;
          voice.src=voice1;
          input.value=0;
          sign=true;
     }   
     else 
     {
         audio.muted=false;
          voice.src=voice2;
          input.value=0.8;
          sign=false;
     }
    
    }

   var icon2=document.getElementById('icon2');
   var icon2img1=document.getElementById('icon2img1');
   var icon2img2=document.getElementById('icon2img1').src;
   var icon2img3=document.getElementById('icon2img2').src;
     var love=false;
    icon2.onclick=function(){
   
    if(love==false)
    { 
     icon2img1.src=icon2img3;
     love=true;
    }
    else if(love==true)
    {
     icon2img1.src=icon2img2;
     love=false;
    }
    }
    //无语了git
    ul1.onmouseover=function(){
     // console.log('1');
     changevoice.style.display='block';
    }
    ul1.onmouseleave=function(){
     // console.log('1');
     changevoice.style.display='none';
    }


   
 
//     var voicetool=document.getElementById('voicetool');
//     var circle=document.getElementById('circle');
//     var voiceload=document.getElementById('voiceload');
//     var changevoice=document.getElementById('changevoice');
//     changevoice.onmousedown=function(e){

//     changevoice.onmousemove=function(e){
//         if(e.offsetX<120&&e.offsetX>3){
//             console.log(e.offsetX);
//         let len=e.offsetX/voicetool.offsetWidth;
//         voiceload.style.width=voicetool.offsetWidth*len+'px';
//         // console.log(len.toFixed(1));
//         if(len>0.1&&len<1)
//         {
//             audio.muted=false;
//             audio.volume=len.toFixed(2);
//         }
    
//     }
// }
//         changevoice.onmouseup=function () {
//             changevoice.onmousemove=false;
//         }
//         changevoice.onmouseleave=function(){
//             changevoice.onmousemove=false;
    


//   }
     //调节音量
    var input=document.getElementById('input');
    input.onmousedown=function(){
     input.onmousemove=function(){
         audio.volume=input.value;
         if(input.value==0)
          { voice.src=voice1;}
          else{  
           voice.src=voice2;
          }
     }
    }
 

// }